<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.search"
        placeholder="这个功能需要在内网环境, 请访问 http://10.62.235.156:9527/wisecar/#/search"
        class="filter-item"
        style="margin-right: 10px;"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.kind"
        placeholder="Type"
        clearable
        style="width: 150px; margin-right: 10px;"
        class="filter-item"
        @change="changeSelect"
      >
        <el-option v-for="item in kinds" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        Search
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="index">
      </el-table-column>
      <el-table-column
        label="Issue ID"
        align="center"
        width="80"
      >
        <template slot-scope="{row}">
          <span class="link-type"><a target="_blank" :href="row.issue_url">{{ row.issue_id }}</a></span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" :show-overflow-tooltip="false">
        <template slot="header" slot-scope="scope">
          <label>Description</label>
          <el-switch
            v-model="showMD"
            class="mdswitch"
            :change="changeMD"
            active-text="markdown展示"
            inactive-text="文本展示"
          />
        </template>
        <template slot-scope="{row}">
          <vue-markdown v-if="showMD">{{ row.description | descriptionFilter(listQuery.search) }}</vue-markdown>
          <div v-else :title="row.description" @click="handleUpdate(row)" v-html="sliceFromKeyWordFilter(row.description,listQuery.search)"></div>
        </template>
      </el-table-column>
      <el-table-column label="Issue Name" width="100px">
        <template slot-scope="{row}">
          <span class="link-type" :title="row.title">
            <a target="_blank" :href="row.issue_url">{{ row.title }}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="Type" width="100px">
        <template slot-scope="{row}">
          <el-tooltip effect="light" content="标明该项是根据issue搜索还是note搜索得到" placement="top-start">
            <span>{{ row.type }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="Project Name" width="150px" align="center">
        <template slot-scope="{row}">
          <span class="link-type" :title="row.project_name">
            <a target="_blank" :href="row.project_url">{{ row.project_name }}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="Labels" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.labels }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110px" align="center">
        <template slot-scope="{row}">
          <img :src="row.author.avatar_url" width="50px" height="50px" style="margin: 0 auto;display: block;">
          <span class="link-type">
            <a target="_blank" :href="row.author.web_url">{{ row.author.name }}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="State" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.state | statusFilter">
            {{ row.state }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="Creted Time" class-name="status-col" width="140">
        <template slot-scope="{row}">
          <span :title="row.created_ts">{{ row.created_ts | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="doSearch"
    />

    <el-dialog :key="new Date().getTime()" :title="temp.title" :visible.sync="dialogFormVisible">
      <vue-markdown>{{ temp.description | descriptionFilter(listQuery.search) }}</vue-markdown>
    </el-dialog>

    <back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import BackToTop from '@/components/BackToTop' // secondary package based on el-pagination
import request from '@/utils/request'
import { parseTime } from '@/utils'

export default {
  name: 'ComplexTable',
  components: { Pagination, VueMarkdown, BackToTop },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        opened: 'info',
        closed: 'danger'
      }
      return statusMap[status]
    },
    descriptionFilter(description, replace) {
      if (!description) {
        return description
      }
      // 增加description 搜索关键字的高亮
      return description.toLowerCase().replace(new RegExp(replace.toLowerCase(), 'g'), `<b><font color=red>${replace}</font></b>`)
    },
    parseTime
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 100,
      listLoading: false,
      showMD: false,
      listQuery: {
        page: 1,
        limit: 20,
        kind: undefined,
        search: undefined,
        type: undefined
      },
      kinds: ['issues', 'notes', 'assemble'],
      temp: {
        description: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.doSearch()
    },
    sliceFromKeyWordFilter(description, keyWord) {
      if (!description) {
        return description
      }
      const index = description.toLowerCase().indexOf(keyWord.toLowerCase())
      return description.slice(Math.max(0, index - 250), Math.min(index + 250, description.length)).toLowerCase().replace(new RegExp(keyWord.toLowerCase(), 'g'), `<b><font color=red>${keyWord}</font></b>`)
    },
    changeSelect() {
      this.doSearch()
    },
    doSearch() {
      this.listLoading = true
      request({
        url: `/gitlab/search/${this.listQuery.kind || 'assemble'}`,
        method: 'get',
        params: this.listQuery
      }).then(resp => {
        /**
           * {
           *    project_name
           *    project_url
           *    issue_id
           *    issue_name
           *    issue_url
           *    title
           *    description
           *    state
           *    labels
           *    author
           *    created_ts
           * }
           */
        console.log('===================================')
        this.list = resp
        console.log(resp)
        console.log('===================================')
        this.listLoading = false
      })
    },
    changeMD() {
      this.showMD = !this.showMD
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogFormVisible = true
    }
  }
}
</script>
